<template>
	<view class="wrapper">
		<view class="user-bg">
			<image src="../../static/images/news-bg.png" mode="widthFix" class="user-img"></image>
		</view>
		<custom-nav-bar :opacityVal="opacityVal" :titleName="'动态榜'" :titleColor="'#000'"></custom-nav-bar>
		<view :style="{height: `${customBar}px`}"></view>
		<scroll-view scroll-y="true" class="main-content" :style="{'height': `calc(100vh - ${customBar}px)`}">
	        <view class="honor-roll-box">
	        	<view class="screen">
					<view class="club-switch">
						<view class="switch-bar" @click="clubToogleBar()">
							<view class="label">{{clubScreenListStr}}</view>
							<image src="../../static/images/data-black-down.png" mode="aspectFit" class="down"
							:class="{'switch-down-rotate': showClubSwitch, 'switch-down-rotate-reverse': !showClubSwitch}">
							</image>
						</view>
						<view class="menu" v-if="showClubSwitch" :class="{'menu-down': showClubSwitch}">
							<view class="item" v-for="(item, index) in clubScreenList" :key="index" @click="clubSwitchBarSelected(item)">
								{{item.label}}
							</view>
						</view>
					</view>
					<view class="day-switch">
						<view class="switch-bar" @click="dayToogleBar()">
							<view class="label">{{dayScreenListStr}}</view>
							<image src="../../static/images/data-black-down.png" mode="aspectFit" class="down"
							:class="{'switch-down-rotate': showDaySwitch, 'switch-down-rotate-reverse': !showDaySwitch}">
							</image>
						</view>
						<view class="day-menu" v-if="showDaySwitch" :class="{'day-menu-down': showDaySwitch}">
							<view class="item" v-for="(item, index) in dayScreenList" :key="index" @click="daySwitchBarSelected(item)">
								{{item.label}}
							</view>
						</view>
					</view>
	        	</view>
				<view class="honor-roll-title">
					<view class="honor-roll-text">今日上榜</view>
				</view>
				<view class="honor-roll">
					<view class="honor-roll-item" v-for="(item, index) in todayList" :key="index">
						<view class="avatar-box" :style="{'border': `3px solid ${item.color}`}">
							<image src="../../static/images/data-left-player.png" mode="aspectFit" class="avatar"></image>
							<view class="tag-box">
								<text :style="{'background': item.color}">{{item.tag}}</text>
							</view>
						</view>
						<view class="player">{{item.player}}</view>
						<view class="desc">{{item.desc}}</view>
					</view>
				</view>
	        </view>
			<view class="today-news">
				<view class="title">
					<view class="empty"></view>
					<view class="center">今日动态</view>
					<view class="right">共8条</view>
				</view>
				<view class="news-list" v-for="(item, index) in newsList" :key="index">
					<view class="left">
						<view class="index">{{index + 1}}</view>
						<image src="../../static/images/data-right-player.png" mode="aspectFit" class="player-avatar"></image>
					</view>
					<view class="right">
						<view class="top-info">
							<view class="player-name">特鲁姆普</view>
							<view class="tag">场胜+1</view>
						</view>
						<view class="text-content">台球是一项绅士运动，已打出了风采！</view>
						<view class="bottom-handle">
							<view class="time">12小时前</view>
							<view class="like-btn-box">
								<view class="like-btn" @click="giveLike(item)">
									<image src="../../static/images/news-unliked.png" mode="aspectFill" class="like-img" v-if="!item.liked"></image>
									<image src="../../static/images/news-liked.png" mode="aspectFill" class="like-img" v-else></image>
								</view>
								<text>90</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import customNavBar from "@/components/custom-nav-bar.vue";
	
	export default {
		data() {
			const customBar	= uni.getStorageSync('CustomBar');
			const dayScreenList = [{
				label: '今天',
				value: 1,
			},{
				label: '昨天',
				value: 2,
			}];
			const clubScreenList = [{
				label: '（北京）中式台球俱乐部（北京）中式台球俱乐部（北京）中式台球俱乐部',
				value: 1,
			},{
				label: '（上海）中式台球俱乐部',
				value: 2,
			}];
			return {
				customBar,
				opacityVal: 'transparent',
				showClubSwitch: false,
				clubScreenListStr: clubScreenList[0].label,
				showDaySwitch: false,
				dayScreenListStr: dayScreenList[0].label,
				dayScreenList,
				clubScreenList,
				todayList: [{
					tag: '炉火纯青',
					player: '丁俊晖',
					desc: '2场进球成功率≥80%',
					color: '#00B042'
				},{
					tag: '交际能手',
					player: '特鲁姆普斯特劳斯',
					desc: '交手人数≥3人',
					color: '#045FCE'
				},{
					tag: '杆杆神速',
					player: '丁俊晖',
					desc: '2场平均出杆时间≤13秒',
					color: '#F0DA8C'
				},{
					tag: '百发百中',
					player: '丁俊晖',
					desc: '2场进球成功率≥80%',
					color: '#00B042'
				},{
					tag: '所向披靡',
					player: '特鲁姆普斯特劳斯',
					desc: '2场进球成功率≥80%',
					color: '#045FCE'
				},{
					tag: '旗开得胜',
					player: '丁俊晖',
					desc: '2场进球成功率≥80%',
					color: '#F0DA8C'
				},{
					tag: '一鸣惊人',
					player: '特鲁姆普',
					desc: '2场进球成功率≥80%',
					color: '#00B042'
				},{
					tag: '一气呵成',
					player: '丁俊晖',
					desc: '2场进球成功率≥80%',
					color: '#045FCE'
				},{
					tag: '力挽狂澜',
					player: '特鲁姆普',
					desc: '2场进球成功率≥80%',
					color: '#F0DA8C'
				}],
				newsList: [{
					player: '特鲁姆普',
					liked: false,
				},{
					player: '特鲁姆普',
					liked: false,
				},{
					player: '特鲁姆普',
					liked: true,
				},{
					player: '特鲁姆普',
					liked: false,
				},{
					player: '特鲁姆普',
					liked: true,
				}]
			}
		},
		components: {
			customNavBar,
		},
		methods: {
			giveLike(item) {
				item.liked = !item.liked;
			},
			clubToogleBar() {
				this.showClubSwitch = !this.showClubSwitch;
				this.showDaySwitch = false;
			},
			clubSwitchBarSelected(item) {
				this.clubScreenListStr = item.label;
				this.showClubSwitch = false;
			},
			dayToogleBar() {
				this.showDaySwitch = !this.showDaySwitch;
				this.showClubSwitch = false;
			},
			daySwitchBarSelected(item) {
				this.dayScreenListStr = item.label;
				this.showDaySwitch = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrapper{
		position: relative;
		background: #F1F2F6;
		.user-bg{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			.user-img{
				width: 100%;
			}
		}
		.main-content{
			box-sizing: border-box;
			padding: 0 20upx 20upx;
			.honor-roll-box{
				padding: 10upx 20upx 20upx;
				.screen{
					display: flex;
					justify-content: space-between;
					margin-bottom: 20upx;
					.club-switch,.day-switch{
						position: relative;
						border-radius: 20upx;
						.switch-bar{
							width: 100%;
							display: flex;
							height: 66upx;
							align-items: center;
							padding: 0 16upx;
							overflow: hidden;
							.label{
								width: calc(100% - 36px);
								color: $gray-color;
								font-size: 26upx;
								white-space: nowrap;       
							    overflow: hidden;    
							    text-overflow: ellipsis; 
							}
							.down{
								width: 40upx;
								height: 40upx;
							}
							.switch-down-rotate{
								transform: rotate(180deg); /* 将图片旋转180度 */
								transition: transform 0.5s ease;
							}
							.switch-down-rotate-reverse{
								transform: rotate(0deg);
								transition: transform 0.5s ease; /* 添加过渡动画效果，持续0.5秒，缓和动画效果 */
							}
						}
						.menu{
							color: $gray-color;
							display: flex;
							flex-direction: column;
							background: #fff;
							border-radius: 20upx;
							position: absolute;
							top: 76upx;
							left: 0;
							z-index: 9;
							padding: 0 14upx;
							box-shadow: 0px 0px 10upx 6upx rgba(0, 0, 0, 0.1);
							max-height: 300upx;
							overflow-y: scroll;
							.item{
								font-size: 26upx;
								padding: 14upx 0;
							}
						}
						.menu-down{
							animation: menumove 0.2s ease 0s 1 normal;
						}
						@keyframes menumove {
							0% {height: 0;}
							50% {height: 50upx;}
							100% {height: 120upx;}
						}
					}
					.club-switch{
						width: calc(100% - 160upx);
						margin-right: 20upx;
						background: rgba(255, 255, 255, 0.6);
						.menu{
							width: calc(100% - 12px);
						}
					}
					.day-switch{
						width: 140upx;
						background: rgba(255, 255, 255, 0.6);
						.day-menu{
							width: calc(100% - 12px);
							color: $gray-color;
							display: flex;
							flex-direction: column;
							background: #fff;
							border-radius: 20upx;
							position: absolute;
							top: 76upx;
							left: 0;
							z-index: 9;
							padding: 0 14upx;
							box-shadow: 0px 0px 10upx 6upx rgba(0, 0, 0, 0.1);
							overflow-y: hidden;
							.item{
								font-size: 26upx;
								padding: 14upx 0;
							}
						}
						.day-menu-down{
							animation: daymenumove 0.2s ease 0s 1 normal;
						}
						@keyframes daymenumove {
							0% {min-height: 0;}
							100% {min-height: 100upx;}
						}
					}
				}
				.honor-roll-title{
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 40upx 0 20upx;
					.honor-roll-text{
						font-size: 34upx;
						font-weight: 600;
					}
				}
				.honor-roll{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					font-size: 26upx;
					align-items: flex-start;
					.honor-roll-item{
						width: 33%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						margin-bottom: 20upx;
						position: relative;
						.avatar-box{
							border: 6upx solid #00B042;
							width: 140upx;
							height: 140upx;
							border-radius: 50%;
							position: relative;
							.avatar{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
							.tag-box{
								position: relative;
								top: -24upx;
								display: flex;
								justify-content: center;
								text{
									font-size: 26upx;
									color: #fff;
									background: #00B042;
									border-radius: 50upx;
									padding: 0 4upx;
								}
							}
						}
						.player{
							text-align: center;
							width: 90%;
							margin: 26upx 0 4upx;
							font-size: 32upx;
							color: $black-color;
							font-weight: 600;
							white-space: nowrap;
							overflow: hidden;    
							text-overflow: ellipsis; 
						}
						.desc{
							display: flex;
							justify-content: center;
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							font-size: 22upx;
							color: $gray-color;
						}
					}
				}
			}
			.today-news{
				background: #fff;
				border-radius: 20upx;
				.title{
					padding: 20upx;
					display: flex;
					justify-content: space-between;
					.empty{
						flex: 1;
					}
					.center{
						flex: 1;
						text-align: center;
						font-weight: 600;
					}
					.right{
						flex: 1;
						display: flex;
						justify-content: flex-end;
						color: $gray-color;
						font-size: 26upx;
						letter-spacing: 4upx;
					}
				}
				.news-list{
					padding: 20upx;
					display: flex;
					border-bottom: 2upx solid #e7e7e8;
					.left{
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 50upx;
						.index{
							font-size: 30upx;
							color: $gray-color;
						}
						.player-avatar{
							width: 50upx;
							height: 50upx;
							margin-left: 30upx;
							margin-right: 20upx;
							border-radius: 50%;
						}
					}
					.right{
						flex: 1;
						display: flex;
						flex-direction: column;
						color: $black-color;
						.top-info{
							display: flex;
							justify-content: space-between;
							.player-name{
								font-weight: 600;
								flex: 1;
							}
							.tag{
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 50upx;
								background: #ffede8;
								color: #FF5219;
								font-size: 24upx;
								font-weight: 600;
								padding: 0 20upx;
								height: 46upx;
								line-height: 46upx;
							}
						}
						.text-content{
							margin: 24upx 0;
							font-size: 30upx;
						}
						.bottom-handle{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.time{
								font-size: 24upx;
								color: $gray-color;
							}
							.like-btn-box{
								display: flex;
								align-items: center;
								position: relative;
								.like-btn{
									
									.like-img{
										width: 40upx;
										height: 40upx;
									}
								}
								text{
									margin-left: 10upx;
									color: $gray-color;
									font-size: 24upx;
									font-weight: 600;
								}
							}
						}
					}
					
				}
			}
		}
		
	}

</style>
